iT邦幫忙

2022 iThome 鐵人賽

DAY 30
0
自我挑戰組

web 應用開發筆記系列 第 30

[Day 30] Visulization Categories

  • 分享至 

  • xImage
  •  

名稱:Streamgraph
連結:https://bl.ocks.org/mbostock/4060954
說明:可用來encode流量資訊,x軸表示時間,顏色寬度表車流量,顏色表測站(如:A測站~B
測站用綠色...)。可以來觀察出是否有規律

名稱:Sankey Diagram
連結:https://bost.ocks.org/mike/sankey/
說明:可用來encode流量資訊,各種顏色的bar是各個測站,灰色部分即為流量。使用時可能
旁邊要再加個time bar,讓使用者選擇要顯示的時間,如:2017/8/10 上午9:00~10:00
之類的,然後就視覺化出來。此圖可來觀測整體的流量變化。

名稱:Sunburst for your skill map
連結:http://bl.ocks.org/wizicer/f662a0b04425fc0f7489
說明:此圖是左右連動的,左邊有hierarchy的結構,隨著滑鼠的移動,右邊的曲線圖就跟著
改變,第一圈可放入起點(如:北中南),第二圈再細分出一些重要的站點(如:虎口..),
第三四圈同理,第五圈可放入時間區段(如:早中晚)、第六圈車種等等。右邊的x軸是
時間(在使用者滑鼠沒滑到第五圈時,一律顯使一整天),y軸是流量

名稱:Parallel Coordinates
連結:http://mbostock.github.io/d3/talk/20111116/iris-parallel.html
說明:這個圖的特色是,每筆資料可以在各個不同的條件下,顯示對應的結果,並且可以看出狀態與狀態之間的關西,我們可以利用每一條x軸的線當作我們想測試的各個測站每日時間條,分析出路段在不同的時間的壅塞狀況。
截圖:

名稱:Condegram Spiral Plot
連結:https://bl.ocks.org/arpitnarechania/027e163073864ef2ac4ceb5c2c0bf616
說明:此圖可以用來觀察是否有週期性的規律。用顏色區分每一天,每個顏色有24個bar(表24
小時),bar的高度就來encode那一小時的總車流量。進階的話可以讓使用者勾選晴
天、雨天、假日等等,然後就根據勾選將不是的bar飽和度降低亮度升高之類的。

名稱:Chord diagram
連結1:https://bl.ocks.org/mbostock/4062006
連結2:https://bost.ocks.org/mike/uberdata/
說明:此圖可以表現在特定時間(可以做個下拉式選單),從某個縣市或交流道上高速公路後,偏向在哪個縣市或交流道下到平面道路的情形。外圈的弧度大小,可以先把所有的北部、中部、南部的縣市、交道做cluster。流
使用者互動:可以再把cluster的部分點擊觀看細節。
截圖:

名稱:Hive Plots
連結: https://bost.ocks.org/mike/hive/
說明:希望利用不同的軸(圖中長條狀)來分別表示台灣不同的地理位置(北、中、南、東),再
利用軸上的不同點來代表不同的測站,進一步來呈現車輛終點、起點的狀況
補充:旁邊可加入統計圖表,以助於user了解數據
截圖:

名稱:radar chart
連結:https://www.visualcinnamon.com/2015/10/different-look-d3-radar-chart.html
說明:利用圓的外圈來放上選定的交流道、測站訊息,而在雷達圖上,可以把雨量、油價或者其他或影響車流量的屬性和車流量疊家再一起,想要呈現的目標是把特定地區在某個狀況下(ex:雨天)一段時間的車流狀況,可以讓使用者提前知道也許在這個狀況下,這個地方是否會塞車。
截圖:

名稱:Diverging Stacked Bar Chart

連結:http://bl.ocks.org/wpoely86/e285b8e4c7b84710e463
說明:這個圖表我覺得可以有效的判斷,測站與測站間的關西,舉例來說Y軸Question 1.2.3.....當作測站,X軸當作投票數,0往右為不塞車狀況,0往左為塞車狀況。紅,橘,藍,深藍分別是車速60以下(慢),60~80(偏慢),80~120(正常),120~140(偏快),140以上(快),每個測站一天24小時24票,每一小時為一票統計,每個測站BAR總長都為24票,這樣就可以比較出來那些測站容易塞車而且還能看出塞車的小時數比較嚴重度
截圖:


上一篇
[Day 29] Vue with Jest
系列文
web 應用開發筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言